<template>
  <div class="vhead-layout">
    <ul class="head-menu fl">
      <li :class="{'active': item.active}" class="head-menu-list fl" v-for="(item,index) in menuData" :key="index"
          v-if="item.moduleName!=='设置'">
        <router-link :to="item.modulePath!==''?item.modulePath:'/purchase'">
          <div class="head-menu-txt" @click="push(item.modulePath,index)">
            <i class="icon_menu" :style="classes[index]"></i>
            <span class="txt">{{item.moduleName}}</span>
          </div>
        </router-link>
        <ol class="head-menu-item none" v-if="item.moduleName==='任务详情'">
          <li v-for="(item2,index2) in item.moduleItems" :key="index2" @click="itemPush(item2.modulePath)"
              v-if="item2.show===true">
            <div class="txt">{{item2.moduleName}}</div>
          </li>
        </ol>
      </li>
    </ul>
    <div class="head-admin fr">
      <div :class="{'admin-set-active': item.active}" class="admin-set-layout fl" v-for="(item,index) in menuData"
           :key="index" v-if="item.moduleName==='设置'">
        <div class="head-admin-set" @click="push(item.modulePath,index)">
          <i class="icon-set" :style="classes[index]"></i>
          <span class="txt">{{item.moduleName}}</span>
        </div>
        <ol class="head-admin-item fl none">
          <li v-for="(item2,index2) in item.moduleItems" :key="index2" @click="itemPush2(item2.modulePath)"
              v-if="item2.show===true">
            <div class="txt">{{item2.moduleName}}</div>
          </li>
        </ol>
      </div>
      <div class="head-admin-user fl">
        <i class="icon-user"></i>
        <span class="txt">{{username}}</span>
      </div>
    </div>
  </div>
</template>
<script>
  import vhead from './vhead.vue'

  export default {
    data () {
      return {
        username: JSON.parse(sessionStorage.getItem('username')),
        menuData: JSON.parse(sessionStorage.getItem('router')),
        classes: [
          {width: '32px', height: '32px', margin: '14px 10px', backgroundPositionX: '0'},
          {width: '24px', height: '24px', margin: '18px 10px', backgroundPositionX: '-40px'},
          {width: '20px', height: '22px', margin: '19px 10px', backgroundPositionX: '-70px'},
          {width: '20px', height: '22px', margin: '19px 10px', backgroundPositionX: '-70px'},
          {width: '20px', height: '22px', margin: '19px 10px', backgroundPositionX: '-96px'},
          {width: '24px', height: '24px', margin: '16px 5px', backgroundPositionX: '-120px'}
        ]
      }
    },
    components: {vhead},
    created () {
    },
    methods: {
      push (route, index) {
        for (let i = 0; i < this.menuData.length; i++) {
          this.menuData[i].active = false
        }
        if (route !== '' && route !== 'readme' && route !== 'cityList' && route !== 'buildProject' && route !== 'buildTask' && route !== 'purchase') {
          this.$router.push('/' + route)
          for (let i = 0; i < this.menuData.length; i++) {
            if (i === index) {
              this.menuData[i].active = true
            }
          }
        }
      },
      itemPush (route) {
        this.$router.push('/' + route)
        for (let i = 0; i < this.menuData.length; i++) {
          this.menuData[i].active = false
          if (this.menuData[i].moduleName === '任务详情') {
            this.menuData[i].active = true
          }
        }
      },
      itemPush2 (route) {
        if (route) {
          this.$router.push('/' + route)
        } else {
          this.exitLogin()
        }
        for (let i = 0; i < this.menuData.length; i++) {
          this.menuData[i].active = false
          if (this.menuData[i].moduleName === '设置') {
            this.menuData[i].active = true
          }
        }
      },
      exitLogin (event) {
        sessionStorage.clear()
        this.$router.push('/login')
      }
    }
  }
</script>
